<template>
  <div class="all">
    <div class="top">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button type="primary" icon="el-icon-search" class="search"
        >搜索</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="dialogVisible = true"
        >添加</el-button
      >
    </div>

    <el-dialog
      title="发布"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="新闻标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="新闻作者">
          <el-input v-model="form.auther"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="是否上传">
          <el-switch v-model="form.isOnline"></el-switch>
        </el-form-item>
        <el-form-item label="新闻内容">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-table :data="tableData" style="width: 90%" class="tb" border="true">
      <el-table-column prop="title" label="标题" width="600"> </el-table-column>
      <el-table-column prop="name" label="作者" width="200"> </el-table-column>
      <el-table-column prop="time" label="发布时间" width="240">
      </el-table-column>
      <el-table-column prop="Operation" label="操作">
        <el-button type="primary" icon="el-icon-edit">编辑</el-button>
        <el-button type="danger" icon="el-icon-delete">删除</el-button>
      </el-table-column>
    </el-table>

    <div class="pnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        class="pnt_el"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      dialogVisible: false,
      input: "",
      tableData: [
        {
          title: "新闻一的xx标题",
          name: "王小虎",
          time: "2022.4.11",
          Operation: "",
        },
        {
          title: "新闻二的xx标题",
          name: "张老三",
          time: "2022.4.11",
          Operation: "",
        },
      ],
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  margin-top: 10px;
  margin-left: 10px;
  display: flex;
  width: 500px;
  justify-content: space-between;
  .search {
    margin: 0 10px;
  }
}
.tb {
  margin: 0 auto;
  margin-top: 20px;
}
.pnt {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
</style>